<template>
  <view class="container">
    <slot name="top"></slot>
    <view class="top-bar">
      <view
        class="top-bar__item"
        v-for="item in tabs"
        :key="item.key"
        :class="{ active: active == item.key }"
        @click="change(item)"
      >
        <view class="text"
          >{{ item.title }} {{ item.num ? `(${item.num})` : ""
          }}<image
            v-if="item.key === 'dateSelect'"
            style="padding-top: 2px"
            class="w24 h24"
            src="../../static/icon_right.png"
        /></view>
      </view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "TopBar",
  props: {
    active: String,
    tabs: Array,
  },
  data() {
    return {
      checked: "",
    };
  },
  created() {
    // this.checked = this.active;
  },
  methods: {
    change(item) {
      if (item.disabled) {
        return uni.showToast({
          title: "暂未开通...",
          icon: "none",
        });
      }
      // this.checked = item.key;
      this.$emit("change", item.key);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fff;
  border-bottom-left-radius: 36rpx;
  border-bottom-right-radius: 36rpx;
  box-shadow: 0 0 8px 0 rgba($color: #000000, $alpha: 0.15);
}
.top-bar {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #666;
}
.top-bar__item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  &.active {
    .text {
      line-height: 80rpx;
      border-bottom: 2px solid transparent;
      border-bottom-color: #5cc39d;
      color: #5cc39d;
    }
  }
  .text {
    display: flex;
    align-items: center;
  }
}
</style>
